<template>
  <el-row class="row">
    <el-col style="margin-top: -55px">
      <span class="leftTitel">{{ title }}</span>
    </el-col>
    <el-col style="margin-top: -40px">
      <span>
        <div class="rightTitel">
          <el-avatar
            style="margin-top: 45px"
            size="medium"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          >
          </el-avatar>
          <span style="margin-left: 10px; margin-top: -15px">神领管理员</span>
          <span style="margin-left: 15px; margin-top: -15px; color: #dcdfe6"
            >|</span
          >
          <span style="margin-left: 15px; margin-top: -10px">
            <img
              @click="clear"
              src=""
              alt=""
            />
          </span>
        </div>
      </span>
    </el-col>
  </el-row>
</template>

<script>
// import { delToken } from "@/utils/storage";
export default {
  props: {
    title: {
      type: String,
    },
  },
  name: "userTitel",
  data() {
    return {};
  },

  created() {},

  methods: {
    clear() {
      this.$confirm("是否继续退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.commit("user/delToken");
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.row {
  background: #f3f5f9;
  font-weight: bold;
  height: 50px;
  display: flex;
  margin-top: -10px;
  margin-bottom: 6px;
}
.leftTitel {
  float: left;
}
.rightTitel {
  float: right;
  display: flex;
}
</style>
